Getting Started

Kyber exposes a set of SVG icons that are usable as React components.

pnpm i @emoney/kyber-icons

import { IconFileGif } from '@emoney/kyber-icons';

Icons are sized relative to the text around them. To make them larger or smaller, set the font size of the icon or the parent element accordingly.

Result

Loading...

Live Editor

<KyberIcons.IconFileGif style={{ fontSize: '3rem' }} />

<KyberIcons.IconFileGif style={{ fontSize: '3rem' }} />

Color can be customized with the color prop. All valid CSS values for colors (e.g., variables, hex, rgba, etc.) are supported.

Result

Loading...

Live Editor

<KyberIcons.IconDiamond01 color="var(--bs-success)" style={{ fontSize: '3rem' }} />

<KyberIcons.IconDiamond01 color="var(--bs-success)" style={{ fontSize: '3rem' }} />

Props are spread onto the <svg> element, so any props supported by SVGs are supported on these Icons.

All Icons

Result

Loading...

Live Editor

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, 100px)', gridGap: '2rem', fontSize: '3rem', }} > {Object.keys(KyberIcons).map((icon) => { const Component = KyberIcons[icon]; return ( <div className="text-center"> <Component /> <br /> <div className="fs-xxs">{icon}</div> </div> ); })} </div>

<div
    style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, 100px)',
        gridGap: '2rem',
        fontSize: '3rem',
    }}
>
    {Object.keys(KyberIcons).map((icon) => {
        const Component = KyberIcons[icon];
        return (
            <div className="text-center">
                <Component />
                <br />
                <div className="fs-xxs">{icon}</div>
            </div>
        );
    })}
</div>